<html>
<head>
	<title>net.js test</title>
	<script type="text/javascript" src="./js/net.js"></script>
	<script type="text/javascript" src="./js/debug.js"></script>
	<script type="text/javascript" src="./js/gui.js"></script>
	<script type="text/javascript" src="./js/jqueryui/js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="./js/jqueryui/js/jquery-ui-1.10.1.custom.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./js/jqueryui/css/ui-lightness/jquery-ui-1.10.1.custom.min.css" />
	<link rel="stylesheet" type="text/css" href="./css/debug.css" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<style type="text/css">
#debug {
	background: #FAFAFA;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
	padding: 5px;
	font-size: 12px;
	font-family: Monospace;
}

.bullet {
	color: #000000;
	font-size: 14px;
}

.debug-info {
	color: #007700;
	font-size: 14px;
}

.debug-warning {
	color: #AA7700;
	font-size: 14px;
}

.debug-error {
	color: #AA0000;
	font-size: 14px;
}
</style>
<script>
window.addEventListener('load', function(){

	// Websockets fix
	$(window).keydown(function(event) {
		// check for escape key
		if (event.which == 27) {
			// the following seems to fix the symptom but only in case the document has the focus
			event.preventDefault();
		}
	});

	loginDialog = $('#login-dialog').dialog({
		autoOpen: false,
		buttons: {
			"OK": function(){
				$(this).dialog('close');
				client.send({a:'auth',login:$(this).children('#login').val(),password:$(this).children('#password').val()});
			}
		},
		open: function(){
			$(this).keypress(function(e){
				if(e.keyCode == 13)
				{
					//$('#login-dialog').dialog().buttons['OK'];// buttons['OK'];
					$(this).parent().find('.ui-dialog-buttonpane button:first').click();
				}
			});
			$(this).parent().find('.ui-dialog-titlebar-close').hide();
		},
//		beforeclose: function(){
//			return false;
//		},
		closeOnEscape: false,
		draggable: false,
		resizable: false,
		modal: true,
		title: 'Authentication'
	});

	function jalert(content)
	{
		$('#alert').children('#content').html(content);
		$('#alert').dialog({
			modal:true,
			buttons: {
				"OK": function(){
					$(this).dialog('close');
				}
			}
		});
	}

	client = new Net.Client(true);
	client
//	.setHostPort('192.168.20.85', 31337)
	.setHostPort('127.0.0.1', 31337)
	.onOpen(function(client){
//		window.setInterval(function(){
//			
//		}, 100);
		debug.add('Connected!');
	})
	.onClose(function(client){
		debug.error('Disconnected.')
	})
	.onMessage(function(client, packet){
		if(packet.a == 'message')
		{
			debug.add(packet.sender+': '+packet.message);
		}
		else if(packet.a == 'auth-required')
		{
			debug.add('Authentication required.');
			$('#login-dialog').dialog('open');
//			login = prompt('Enter your login:');
//			password = prompt('Enter your password:');
//			client.send({a:'auth',login:login,password:password});
		}
		else if(packet.a == 'connected')
		{
			debug.add('User connected from '+packet.sender);
		}
		else if(packet.a == 'auth')
		{
			if(packet.success)
			{
				jalert('Authorization successful!');
			}
			else
			{
				jalert('Authorization failed.');
			}
		}
		else if(packet.a != 'pingok')
		{
			debug.add('Received packet `'+JSON.stringify(packet)+'`');
		}
	})
	.onWrite(function(client){
		pinger.reset();
	})
	.connect();

	pinger = new Net.Pinger(client, 3000);
	reconnector = new Net.Reconnector(client, 1000);
});
</script>

<div id="">
<input type="text" name="message" id="message" onKeyPress="if(event.keyCode == 13) { client.send({'a':'message','message':this.value}); this.value = ''; }">
</div>

<div id="debug">
</div>

<div id="login-dialog">
Login:<br /><input type="text" id="login" value="" /><br />
Password:<br /><input type="password" id="password" value="" /><br />
</div>

<div id="alert" title="Message">
	<div id="content"></div>
</div>

</html>
